<template>
  <div>
    <div class="placeholder">
      <div class="search-static">
        <div class="box">
          <span class="icon iconfont icon-sousuo"></span>
          <input
            type="text"
            class="inp"
            placeholder="请输入搜索关键词"
            v-model="value"
            @input="onInput"
          />
        </div>
      </div>
    </div>
    <!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->

    <!-- 内容 -->
    <van-tree-select
      height="100vh"
      :items="typeList"
      :main-active-index.sync="active"
      @click-nav="clickLeft"
    >
      <template #content>
        <!-- <div class="right"> -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ul class="goodslist">
            <li
              class="item"
              v-for="item in list"
              :key="item.productId"
              @click="$router.push('/home/goodDetail/' + item.productId)"
            >
              <img :src="item.imgUrl" alt="" class="img" />
              <div class="text">{{ item.masterName }}</div>
            </li>

            <li class="item after"></li>
            <li class="item after"></li>
            <li class="item after"></li>
          </ul>
        </van-list>
        <!-- </div> -->
      </template>
    </van-tree-select>

    <!-- <div class="container">
      <div class="left">
        <ul class="menu">
          <li class="item active">时令鲜果</li>
          <li class="item f14">海鲜水产</li>
          <li class="item f14">家禽蛋</li>
          <li class="item f14">地方农产</li>
          <li class="item f14">百果园公司</li>
          <li class="item f14">农品茗茶</li>
          <li class="item f14">五谷杂粮</li>
          <li class="item f14">牛羊肉</li>
        </ul>
      </div>

      <div class="right">
        <ul class="goodslist">
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_180"
              alt=""
              class="img"
            />
            <div class="text">新鲜冰糖橙 5斤装 （果径60mm+</div>
          </li>

          <li class="item after"></li>
          <li class="item after"></li>
          <li class="item after"></li>
        </ul>
      </div>
    </div> -->
    <Footer />
  </div>
</template>

<script>
import Footer from "@components/Footer.vue";
import { get, post } from "@/request/index";
export default {
  data() {
    return {
      active: 0,
      // 左侧列表数据
      typeList: [],
      // 右侧数据
      list: [],
      // 当前的类型
      categoryId: "145",
      currPage: 1,
      loading: false,
      finished: false,
      value: "",
      // 防抖
      timer: null,
    };
  },
  created() {
    this.getType();
    let categoryId = this.$route.query.categoryId;
    if (categoryId) {
      this.active = this.$route.query.active;
      this.categoryId = categoryId;
    }
  },
  components: {
    Footer,
  },
  methods: {
    // 获取左侧列表的类型
    getType() {
      get("/category/all")
        .then((res) => {
          console.log("左侧", res);
          this.typeList = res.list.map((item) => {
            return {
              ...item,
              text: item.name,
            };
          });
        })
        .catch((err) => console.log("获取左侧失败", err));
    },
    // 获取右侧
    getList() {
      let obj = {
        currPage: this.currPage,
        categoryId: this.categoryId,
      };
      get("/product/list", obj)
        .then((res) => {
          console.log("右侧", res);
          if (this.currPage === 1) {
            this.list = res.list;
          } else {
            this.list = [...this.list, ...res.list];
          }

          this.currPage++;
          //2. 加载状态结束
          this.loading = false;

          // 3.数据全部加载完成
          if (res.list.length == 0) {
            this.finished = true;
          }
        })
        .catch((err) => console.log("右侧获取失败", err));
    },
    clickLeft(index) {
      // 重置
      this.currPage = 1;
      this.categoryId = this.typeList[index].categoryId;
      this.list = [];
      // 触发加载
      this.loading = true;

      this.finished = false;
      setTimeout(() => {
        this.loading = false;
      }, 300);
      // this.getList();
    },
    onLoad() {
      this.getList();
    },
    onInput() {
      this.finished = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // 发送搜索请求
        get("/product/search", { keyword: this.value })
          .then((res) => {
            this.list = res.list;
            console.log("搜索结果", res);
          })
          .catch((err) => console.log("搜索失败", err));
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import "./type.less";
.placeholder {
  // 占位符
  height: 50px;
}

.van-tree-select {
  height: calc(100vh - 100px) !important;
  overflow: auto !important;
}
</style>